<template>
	<view>
		<view class="page_height_box">
			<view class="top_nav_box">
<!--				<navigation-custom :config="config" @customConduct="customConduct" />-->

				<u-navbar
						title="意见反馈"
						:autoBack="true"
						:bgColor="'rgba(255,255,255,0)'"
						leftIconColor="#fff"
						rightIconColor="#fff"
						:titleStyle="{color:'#fff'}"
						rightText="记录"
						@rightClick="$common.go(1,`/pages/user/feedList`)"
				>
				</u-navbar>
			</view>
			<view class="page_item_bj"></view>
			<scroll-view scroll-y class="page_content_box" :style="{height:scrollViewHeight}">
<!--				<view :style="{height:statusHeight+'px'}"></view>-->
				<view class="main">
					<view class="nav">
						<view class="li" :class="active == '功能问题' ? 'active' : ''" @click="activeClick('功能反馈')">
							<image class="show" src="../../static/images/icon29.png"></image>
							<image class="hide" src="../../static/images/icon29h.png"></image>
							<text>功能问题</text>
						</view>
						<view class="li" :class="active == '界面布局' ? 'active' : ''" @click="activeClick('界面布局')">
							<image class="show" src="../../static/images/icon30.png"></image>
							<image class="hide" src="../../static/images/icon30h.png"></image>
							<text>界面布局</text>
						</view>
						<view class="li" :class="active == '用户体验' ? 'active' : ''" @click="activeClick('用户体验')">
							<image class="show" src="../../static/images/icon31.png"></image>
							<image class="hide" src="../../static/images/icon31h.png"></image>
							<text>用户体验</text>
						</view>
						<view class="li" :class="active == '服务支持' ? 'active' : ''" @click="activeClick('服务支持')">
							<image class="show" src="../../static/images/icon32.png"></image>
							<image class="hide" src="../../static/images/icon32h.png"></image>
							<text>服务支持</text>
						</view>
						<view class="li" :class="active == '配送问题' ? 'active' : ''" @click="activeClick('配送问题')">
							<image class="show" src="../../static/images/icon33.png"></image>
							<image class="hide" src="../../static/images/icon33h.png"></image>
							<text>配送问题</text>
						</view>
						<view class="li" :class="active == '安全相关' ? 'active' : ''" @click="activeClick('安全相关')">
							<image class="show" src="../../static/images/icon34.png"></image>
							<image class="hide" src="../../static/images/icon34h.png"></image>
							<text>安全相关</text>
						</view>
						<view class="li" :class="active == '吐槽' ? 'active' : ''" @click="activeClick('吐槽')">
							<image class="show" src="../../static/images/icon35.png"></image>
							<image class="hide" src="../../static/images/icon35h.png"></image>
							<text>吐槽</text>
						</view>
						<view class="li" :class="active == '其他问题' ? 'active' : ''" @click="activeClick('其他问题')">
							<image class="show" src="../../static/images/icon36.png"></image>
							<image class="hide" src="../../static/images/icon36h.png"></image>
							<text>其他问题</text>
						</view>
					</view>
					<view class="form">
						<view class="li">
							<view class="title">
								<view class="fl">
									<view class="h1">请描述具体问题</view>
								</view>
								<!--<view class="fr">
									<text>快捷输入</text>
									<image src="../../static/images/icon37.png"></image>
								</view>-->
							</view>
							<view class="textArea">
								<u--textarea border="none" placeholder="请详细描述您的问题和意见..." count :maxlength="1000" v-model="content"></u--textarea>
							</view>
						</view>
						<view class="li">
							<view class="title">
								<view class="fl">
									<view class="h1">图片</view>
									<view class="h2">(选填，提供问题截图，总大小10M以下)</view>
								</view>
							</view>
							<view class="upload">
								<u-upload
									:fileList="fileList1"
									@afterRead="afterRead"
									@delete="deletePic"
									name="1"
									multiple
									:maxCount="10"
									:uploadIcon="'plus'"
								></u-upload>
							</view>
						</view>
						<view class="li">
							<view class="title">
								<view class="fl">
									<view class="h1">满意度评星</view>
									<view class="h3">
										<u-rate activeColor="#418AFF" size="25" v-model="star"></u-rate>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="foot">
			<view class="btn" @click="submit">提交反馈</view>
		</view>
	</view>
</template>

<script>
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			navigationCustom,
		},
		data() {
			return {
				config: {
					title: "意见反馈", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#fff", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back2.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
				statusHeight: 0,
				fileList1:[],
				active:'功能问题',
				content:'',
				star:'',
				scrollViewHeight:0
			}
		},
		onLoad() {
			this.statusHeight = uni.getSystemInfoSync().statusBarHeight  + 44;
			this.scrollViewHeight = uni.getSystemInfoSync().windowHeight - this.statusHeight + 'px';
		},
		methods:{
			submit(){
				console.log(this.fileList1);
				if(!this.content){
					return uni.showToast({
					    title:'请详细描述您的问题和意见',
					    icon:'none'
					})
				}
				if(!this.star){
					return uni.showToast({
					    title:'请对我们进行评分',
					    icon:'none'
					})
				}

				let images = [];
				if(this.fileList1.length > 0){
					this.fileList1.forEach(item => {
						images.push(item.url.complete_url)
					})
				}

				uni.showLoading({
				    title:'提交中',
				    mask:true
				});

				this.globalajax('consumer/feedbackCreate',{
					source:2,
					content:this.content,
					images:images.toString(),
					type:this.active,
					star:this.star
				},'POST',res => {
					uni.hideLoading();
					uni.showToast({
					    title:'提交成功',
					    icon:'none'
					});
					setTimeout(() => {
						this.$common.back();
					},1000)
				})
			},
			activeClick(active){
				this.active = active;
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					this.$common.upLoadImg(lists[i].url).then(result => {
						if(result.code == 200){
							let item = this[`fileList${event.name}`][fileListLen]
							this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
								status: 'success',
								message: '',
								url: result.data,
							}))
							fileListLen++;
						} else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}

					});
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
	}
	.page_height_box{
		min-height: 100vh;
	}
	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.page_item_bj {
		width: 750rpx;
		height: 664rpx;
		background-image: url('../../static/images/png03.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.page_content_box{
		width: 750rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		box-sizing: border-box;
		padding-bottom: 146rpx;
		.main{
			padding: 0 32rpx 0 32rpx;
			.nav{
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				.li{
					width: 156rpx;
					height: 156rpx;
					border-radius: 24rpx;
					background: rgba(255,255,255,0.6);
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					margin-top: 24rpx;
					image{
						width: 72rpx;
						height: 72rpx;
						&.hide{
							display: none;
						}
					}
					text{
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #333;
					}
					&.active{
						background: #418AFF;
						text{
							color: #fff;
						}
						image{
							&.hide{
								display: block;
							}
							&.show{
								display: none;
							}
						}
					}
				}
			}
			.form{
				margin-top: 16rpx;
				.li{
					margin-top: 32rpx;
					.title{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.fl{
							display: flex;
							align-items: center;
							.h1{
								font-size: 32rpx;
								color: #333;
							}
							.h2{
								font-size: 24rpx;
								color: #333;
							}
							.h3{
								margin-left: 15rpx;
							}
						}
						.fr{
							width: 188rpx;
							height: 44rpx;
							border-radius: 12rpx;
							box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.12);
							display: flex;
							align-items: center;
							justify-content: center;
							background: #fff;
							text{
								font-size: 24rpx;
								color: #333;
							}
							image{
								width: 16rpx;
								height: 16rpx;
								margin-left: 12rpx;
							}
						}
					}
					.textArea{
						margin-top: 24rpx;
						/deep/ .u-textarea{
							.u-textarea__field{
								font-size: 24rpx;
							}
						}
					}
					.upload{
						margin-top: 24rpx;
						/deep/ .u-upload{
							.u-upload__wrap{
								.u-upload__button{
									width: 216rpx !important;
									height: 216rpx !important;
									background: #fff;
									border-radius: 24rpx !important;
								}
							}
						}
					}
					.inputBox{
						margin-top: 24rpx;
						/deep/ .u-input{
							padding: 0 !important;
							.u-input__content__field-wrapper__field{
								height: 82rpx;
								border-radius: 24rpx;
								background: #fff;
								padding: 0 24rpx;
							}
						}
					}
				}
			}
		}
	}
	.foot{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 16rpx 44rpx;
		background: #fff;
		z-index: 99;
		.btn{
			height: 86rpx;
			background: #418AFF;
			border-radius: 24rpx;
			text-align: center;
			line-height: 86rpx;
			font-size: 32rpx;
			color: #fff;
		}
	}
</style>
